<template>
  <div id="vditor"></div>
</template>
<script>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  name: '',
  data () {
    return {
      editor: null,
      toolbar: [
        'emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|', 'list', 'ordered-list', 'check', 'outdent',
        'indent', '|', 'quote', 'line', 'code', 'inline-code', 'insert-before', 'insert-after', '|', 'upload',
        'table', '|', 'undo', 'redo', '|', 'export', { name: 'more', toolbar: ['fullscreen', 'both', 'preview'] }
      ]
    }
  },
  methods: {
    getContent () {
      return this.editor.getValue()
    },
    setContent (txt) {
      console.log(this.editor.lute)
      setTimeout(() => {
        if (this.editor.lute) {
          this.editor.setValue(txt)
        } else {
          setTimeout(() => {
            this.editor.setValue(txt)
          }, 400)
        }
      }, 300)
    },
    init () {
      this.editor = new Vditor('vditor', {
        width: '100%',
        value: '',
        minHeight: 700,
        placeholder: '此处为话题内容……',
        theme: 'classic',
        cdn: 'https://static.gz640.cn/vditor',
        counter: {
          enable: true,
          type: 'markdown'
        },
        outline: {
          enable: false
        },
        preview: {
          delay: 0,
          hljs: {
            style: 'monokai',
            lineNumber: true
          }
        },
        tab: '\t',
        typewriterMode: true,
        toolbarConfig: {
          pin: true
        },
        cache: {
          enable: false
        },
        mode: 'wysiwyg',
        upload: {
          accept: 'image/*,.mp3, .wav, .rar',
          url: process.env.VUE_APP_BASE_API + '/file/upload',
          fieldName: 'file',
          multiple: false,
          headers: {
            Authorization: Vue.ls.get(ACCESS_TOKEN)
          },
          extraData: {
            source: 3,
            code: '3'
          },
          format: function (files, res) {
            const { code, data, msg } = JSON.parse(res)
            return JSON.stringify({
              'msg': msg,
              'code': code,
              'data': {
                'errFiles': [],
                'succMap': {
                  [data.fileName]: data.previewUrl
                }
              }
            })
          }
        },
        toolbar: this.toolbar
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
